<template>
  <div class="login">
    <!-- vant组件，布局头部区域 -->
    <van-nav-bar
      title="会员登录"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 自己写下面的登录页面 -->
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>

      <div class="form">
        <div class="form-item">
          <input
            v-model="mobile"
            class="inp"
            maxlength="11"
            placeholder="请输入手机号码"
            type="text"
          />
        </div>
        <div class="form-item">
          <input
            v-model="picCode"
            class="inp"
            maxlength="5"
            placeholder="请输入图形验证码"
            type="text"
          />
          <img
            v-if="picUrl"
            :src="picUrl"
            alt="图形验证码"
            class="pic-code-img"
            @click="getPicCode"
          />
        </div>
        <div class="form-item">
          <input
            v-model="msgCode"
            class="inp"
            placeholder="请输入短信验证码"
            type="text"
          />
          <button
            :disabled="second < totalSecond"
            class="code-btn"
            @click="getCode"
          >
            {{ second === totalSecond ? '获取验证码' : second + '秒后重新发送' }}
          </button>
        </div>
      </div>

      <div
        class="login-btn"
        @click="login"
      >
        登录
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

// 路由实例
const router = useRouter()

// 表单数据
const mobile = ref('18971493492')
const picCode = ref('')
const msgCode = ref('123456')
const picUrl = ref('')
const second = ref(60)
const totalSecond = ref(60)
let timer = null

// 前端生成图形验证码
const getPicCode = () => {
  // 创建一个canvas元素
  const canvas = document.createElement('canvas')
  canvas.width = 120
  canvas.height = 40
  const ctx = canvas.getContext('2d')
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 绘制背景
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
  gradient.addColorStop(0, '#fff3e0')
  gradient.addColorStop(1, '#ffe0b2')
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  // 生成随机验证码
  const codeChars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789'
  let code = ''
  for (let i = 0; i < 5; i++) {
    code += codeChars.charAt(Math.floor(Math.random() * codeChars.length))
  }
  
  // 绘制验证码文字
  ctx.font = 'bold 20px Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  
  // 每个字符使用不同的颜色和角度
  const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5']
  for (let i = 0; i < code.length; i++) {
    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]
    ctx.save()
    ctx.translate(24 + i * 18, canvas.height / 2)
    ctx.rotate((Math.random() - 0.5) * 0.4) // 随机旋转角度
    ctx.fillText(code.charAt(i), 0, 0)
    ctx.restore()
  }
  
  // 绘制干扰线
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)]
    ctx.beginPath()
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
    ctx.stroke()
  }
  
  // 绘制干扰点
  for (let i = 0; i < 30; i++) {
    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]
    ctx.beginPath()
    ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI)
    ctx.fill()
  }
  
  // 将canvas转换为base64编码的图片
  picUrl.value = canvas.toDataURL('image/png')
  
  return code
}

// 组件挂载时获取图形验证码
getPicCode()

// 获取短信验证码
const getCode = () => {
  // 验证手机号
  if (!/^1\d{10}$/.test(mobile.value)) {
    showToast('请输入正确的手机号码')
    return
  }

  // 验证图形验证码
  if (!picCode.value.trim()) {
    showToast('请输入图形验证码')
    return
  }

  // 显示发送中提示
  showToast('发送中...')

  // 模拟发送验证码请求
  setTimeout(() => {
    showToast('验证码发送成功')
    // 开始倒计时
    startCountdown()
  }, 1000)
}

// 开始倒计时
const startCountdown = () => {
  second.value = totalSecond.value

  if (timer) {
    clearInterval(timer)
  }

  timer = setInterval(() => {
    second.value--
    if (second.value <= 0) {
      clearInterval(timer)
      second.value = totalSecond.value
    }
  }, 1000)
}

// 登录处理
const login = () => {
  // 验证表单
  if (!/^1\d{10}$/.test(mobile.value)) {
    showToast('请输入正确的手机号码')
    return
  }

  if (!picCode.value.trim()) {
    showToast('请输入图形验证码')
    return
  }

  if (!msgCode.value.trim()) {
    showToast('请输入短信验证码')
    return
  }

  // 显示登录中提示
  showToast('登录中...')

  // 模拟登录请求
  setTimeout(() => {
    showToast('登录成功')
    router.push('/')
  }, 1500)
}

// 清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="less" scoped>
// 导入全局变量
@import '@/styles/variables.less';
// 样式部分
.login {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff9800 0%, #ff5722 50%, #e91e63 100%);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  display: flex;
  flex-direction: column;

  // 动态渐变动画
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  // 导航栏样式覆盖
  :deep(.van-nav-bar) {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .van-nav-bar__title {
      color: #333;
      font-size: 16px;
      font-weight: 500;
    }

    .van-icon-arrow-left {
      color: #333;
    }
  }

  .container {
    flex: 1;
    padding: 30px 20px;
    background-color: #fff;

    .title {
      text-align: center;
      margin-bottom: 30px;

      h3 {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin: 0 0 8px 0;
      }

      p {
        font-size: 13px;
        color: #999;
        margin: 0;
      }
    }

    .form {
      margin-bottom: 30px;

      .form-item {
        position: relative;
        margin-bottom: 20px;

        .inp {
          width: 100%;
          height: 48px;
          border: 1px solid #e0e0e0;
          border-radius: 24px;
          padding: 0 16px;
          font-size: 15px;
          transition: all 0.3s ease;
          box-sizing: border-box;

          &:focus {
            outline: none;
            border-color: #4caf50;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
          }

          &::placeholder {
            color: #999;
          }
        }

        .pic-code-img {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          width: 120px;
          height: 36px;
          border-radius: 18px;
          cursor: pointer;
          border: 1px solid #e0e0e0;
        }

        .code-btn {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          height: 32px;
          padding: 0 16px;
          background-color: #4caf50;
          color: #fff;
          border: none;
          border-radius: 16px;
          font-size: 13px;
          cursor: pointer;
          transition: all 0.3s ease;

          &:disabled {
            background-color: #e0e0e0;
            color: #999;
            cursor: not-allowed;
          }

          &:not(:disabled):active {
            transform: translateY(-50%) scale(0.95);
          }
        }
      }
    }

    .login-btn {
      width: 100%;
      height: 48px;
      background-color: #4caf50;
      color: #fff;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 24px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
        background-color: #45a049;
      }
    }
  }

  // 响应式设计
  @media screen and (max-width: 375px) {
    .container {
      padding: 20px 15px;

      .title {
        margin-bottom: 25px;

        h3 {
          font-size: 18px;
        }
      }

      .form {
        .form-item {
          margin-bottom: 16px;

          .inp {
            height: 44px;
            font-size: 14px;
          }

          .pic-code-img {
            width: 100px;
            height: 32px;
          }

          .code-btn {
            height: 28px;
            padding: 0 12px;
            font-size: 12px;
          }
        }
      }

      .login-btn {
        height: 44px;
        font-size: 15px;
      }
    }
  }
}
</style>
